<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    const vnode = {
      tag: "div",
      props: {
        onClick: () => alert("hello"),
      },
      children: "click me",
    };

    /**渲染dom */
    function renderer(vnode, container) {
      // 使用 vnode.tag 作为标签名称创建 DOM 元素
      const el = document.createElement(vnode.tag);
      // 遍历 vnode.props，将属性、事件添加到 DOM 元素
      for (const key in vnode.props) {
        if (/^on/.test(key)) {
          // 如果 key 以 on 开头，说明它是事件
          el.addEventListener(
            // substr 提取字符串
            key.substr(2).toLowerCase(), // 事件名称 onClick ---> click
            vnode.props[key] // 事件处理函数
          );
        }
      }

      // 处理 children
      if (typeof vnode.children === "string") {
        // 如果 children 是字符串，说明它是元素的文本子节点
        el.appendChild(document.createTextNode(vnode.children));
      } else if (Array.isArray(vnode.children)) {
        // 递归地调用 renderer 函数渲染子节点，使用当前元素 el 作为挂载点
        vnode.children.forEach((child) => renderer(child, el));
      }

      // 将元素添加到挂载点下
      container.appendChild(el);
    }
    const app = document.querySelector("#app");
    console.log("app", app);
    renderer(vnode, app);
  </script>
</html>
